<template>
    <div class="admin_user_scene_index">
        <div class="row">
            <div class="col-xs-12">
                <data-table class="box" :class="'box-'+theme" :options="options" ref="table">
                    <template slot="sizer-more" slot-scope="props">
                        <div class="row" >
                            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 sizer-item">
                            </div>
                        </div>
                    </template>

                    <template slot="col" slot-scope="props">
                      
                        <span v-if="props.k =='user_id'">
                            [ID:{{props.row.user_id}}] {{props.row.user.mobile_phone}}
                        </span>
                    
                        <span v-else-if="props.k =='material'">
                            <span v-if="props.row.material_type==1">                               
                                <img style="width: 80px; height:80px;" :src="props.row.material" @click="diaglogHandle(props.row.material,1)"  />   
                            </span>
                            <span v-else   >
                                {{props.row.material | truncate(200) }}
                                <span style="font-size: smaller;padding-left: 10px;color: #ccc;" v-if="props.row.material.length>200" @click="diaglogHandle(props.row.material,2)"> 更多</span>
                            </span>                        
                        </span> 
                        
                        <span v-else>
                            {{props.row | array_get(props.k)}}
                        </span>
                    </template>

                </data-table>
            </div>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="70%"
            center>
                <span v-if="materail_type==1">
                    <img :src="materail" style="width: 100%;"/>
                </span>
                <span v-if="materail_type==2">{{materail}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
    export default {
        components:{
            'data-table':()=>import(/* webpackChunkName: "common_components/datatable.vue" */ 'common_components/datatable.vue'),
            "select2":()=>import(/* webpackChunkName: "common_components/select2.vue" */ 'common_components/select2.vue'),
            "icheck":()=>import(/* webpackChunkName: "common_components/icheck.vue" */ 'common_components/icheck.vue'),
            "el-button": ()=>import(/* webpackChunkName: "element-ui/lib/drawer" */ 'element-ui/lib/button'),
            "el-select": () => import(/* webpackChunkName: "element-ui/lib/select" */ 'element-ui/lib/select'),
            "el-option": () => import(/* webpackChunkName: "element-ui/lib/option" */ 'element-ui/lib/option'),
            "el-dialog": () => import(/* webpackChunkName: "element-ui/lib/option" */ 'element-ui/lib/dialog'),
        },
        props: {
        },
        data(){
            let def_options = JSON.parse(this.$router.currentRoute.query.options || '{}');
            return {
                options:{
                    lang_table:'user_scene', //字段翻译
                    id:'data-table', //多个data-table同时使用时唯一标识
                    url:'', //数据表请求数据地址
                    operation:false, //操作列
                    checkbox:false, //选择列
                    btnSizerMore:true, //更多筛选条件按钮
                    keywordKey:'user.mobile_phone|scene', //关键字查询key
                    keywordGroup:true, //是否为选项组
                    keywordPlaceholder:()=>{
                        return '请输入';
                    },
                    primaryKey:'id', //数据唯一性主键
                    defOptions:def_options, //默认筛选条件
                    fields: {
                        id:{name:"ID",order:true},
                        scene:{name:"场景",order:true,type:"select2"},
                        user_id:{name:"用户",order:true,type:"select2"},
                        // is_delete:{name:"记录状态",order:true,type:'label'},
                        material:{name:"素材",type:'label'},
                        // material_type:{name:"素材类型",type:'label'},
                        updated_at:{name:"更新时间",order:true,type:"time"}
                    },
                    scenelist:[],
                },
                input_per_page:'',
                centerDialogVisible:false,
                materail_type:0,
                materail:'',
            };
        },
        computed:{
            ...mapState([
                'use_url',
                'theme'
            ])
        },
        filters:{
           // 定义过滤器
            truncate: function (value, length) {
                if (!value) return '';
                value = value.toString();
                if (value.length <= length) {
                    return value;
                }
                return value.substring(0, length) + '...';
            }
        },
        mounted(){
             
        },
        methods:{
            getSceneList(){
                // axios.get(window.AppConfig['use_url']+"/admin/scenes").then( (response) =>{  
                //    if(response.data.list.data){      
                //        this.options.scenelist = response.data.list.data;  
                //        console.log(this.options.scenelist)                     
                //    }
                // });
            },
            diaglogHandle(data,type) {
                this.centerDialogVisible = true;
                this.materail_type = type;
                this.materail =data;
            }
        }
    };
</script>
<style lang="scss" scoped>


</style>
